<!-- 
  @description: 右键菜单(本项目暂无使用)
-->
<template>
  <div class="menu">
    <ul class="menu-list">
      <li
        class="menu-item"
        @click="itemClick(item)"
        v-for="(item, index) of rightMenuList"
        :key="index"
      >
        <svg
          t="1647769643266"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5973"
          width="16"
          height="16"
        >
          <path
            d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
            p-id="5974"
          ></path>
        </svg>
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
/**
 * 使用方法
 * 1.在需要右键事件的地方绑定 @contextmenu.prevent.stop="rightClick($event)"
 * 2.引入 hooks 函数：import useRightMenu from '../hooks/useRightMenu'
 *                   let { rightMenu, closeMenu, rightClick } = useRightMenu()
 * 3.挂载元素，ref名称必须为 rightMenu：<L-RightMenu ref="rightMenu" @menuClick="menuClick"></L-RightMenu>
 */
import { watch, ref, computed, PropType } from 'vue'

interface MenuItem {
  // 标识
  code: string
  // 显示文字
  name: string
}

defineExpose({
  changeMenuVisible,
  closeMenu,
})

const emit = defineEmits(['menuClick'])

defineProps({
  // 右键菜单列表
  rightMenuList: {
    type: Array as PropType<MenuItem[]>,
    default: [
      {
        name: '分享',
      },
      {
        name: '点赞',
      },
      {
        name: '收藏',
      },
    ],
  },
})

// 菜单项点击
function itemClick(item: MenuItem) {
  emit('menuClick', item)
}

function changeMenuVisible(e: PointerEvent) {
  e.preventDefault()

  setMenuStyle(e)
}

function closeMenu() {
  const menu: any = document.querySelector('.menu')
  // menu.style.height = `0`
  menu.classList.remove('is-active')
}

function setMenuStyle(e: PointerEvent) {
  // 右键菜单DOM元素
  const menu: any = document.querySelector('.menu')
  const menuHeight = 'auto'
  let numberReg = /(\d)+/g

  // 视口宽高
  const innerWidth = window.innerWidth
  const innerHeight = window.innerHeight

  // 事件触发位置
  const clientX = e.clientX
  const clientY = e.clientY

  // 距离右边和底部距离
  const distanceRight = innerWidth - clientX
  const distanceBottom = innerHeight - clientY

  // 元素实际宽高，并转换成数字型，如 "152px" -> 152
  const menuActualWidth = Number(
    getComputedStyle(menu)['width'].match(numberReg)?.[0]
  )
  const menuActualHeight = Number(
    getComputedStyle(menu)['height'].match(numberReg)?.[0]
  )

  // 是否临近右边或底部
  const isNearRight: boolean = distanceRight <= menuActualWidth
  const isNearBottom: boolean = distanceBottom <= menuActualHeight

  // clientX: 相对于浏览器的有效区域
  menu.style.left = isNearRight
    ? // 已超出右边宽度，则向左偏移，避免超出部分被挡住
      `${e.clientX - menuActualWidth}px`
    : `${e.clientX}px`

  menu.style.top = isNearBottom
    ? // 已超出底部高度，则向上偏移，避免超出部分被挡住
      `${e.clientY - menuActualHeight}px`
    : `${e.clientY + 5}px`

  menu.style.height = `${menuHeight}`
  menu.classList.add('is-active')
}
</script>

<style lang="less" scoped>
.menu {
  position: absolute;
  width: 152px;
  padding: 4px;
  box-shadow: 0 1px 4px rgba(28, 28, 32, 0.04),
    0 8px 24px rgba(28, 28, 32, 0.12);
  border-radius: 10px;
  background-color: white;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: opacity 0.2s ease, height 0.3s ease, visibility 0.3s ease;
  z-index: 9999;
}

.is-active {
  opacity: 1;
  visibility: visible;
}

.menu-list {
  list-style: none;
  padding: 0 10px;
  margin: 10px 0;
}

.menu-item {
  line-height: 22px;
  color: #25262b;
  font-size: 14px;
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  transition: background 0.3s ease;
}

.menu-item:hover {
  background-color: #f5f5f6;
}

.menu-item svg {
  margin-right: 8px;
}
.menu-item-divider {
  height: 1px;
  margin: 4px 8px;
  background-color: #f5f5f6;
}

.menu-item-danger {
  color: #ff6f66;
}

.menu-item-danger svg path {
  fill: #ff6f66;
}

.menu-item-danger:hover {
  background-color: #ffeae9;
}
</style>
